<template>
    <div class="three">
        <el-container>

            <el-main class="qaz">
                <el-menu class="el-menu-vertical-demo" background-color="#F0F0F0" text-color="#606273"
                    active-text-color="#296EB4">
                    <i class="el-icon-potato-strips"><span slot="title">系管理</span></i>
                </el-menu>
                <el-main class="wsx">
                    <el-button> + 创建</el-button>
                    <template>
                        <el-input v-model="input" placeholder="请输入内容" class="edc"></el-input>
                        <el-button type="primary" icon="el-icon-search" class="edc1">搜索</el-button>
                    </template>
                    <el-pagination background layout="prev, pager, next" :total="50" page-size="10" class="rfv">
                    </el-pagination>
                    <el-table :data="tableData" stripe style="width: 100%;">
                        <el-table-column prop="date" label="系ID" width="180;">
                        </el-table-column>
                        <el-table-column prop="name" label="系名" width="180">
                        </el-table-column>
                        <el-table-column prop="address" label="专业数">
                        </el-table-column>
                        <el-table-column prop="address" label="教师数">
                        </el-table-column>
                        <el-table-column prop="address" label="操作">
                            <el-button type="primary">编辑</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-table-column>
                    </el-table>
                </el-main>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    }
}
</script>

<style lang="scss">
.three {
    height: 100%;
}

.qaz {
    padding: 10px;
    padding-right: 10px;
    background-color: #F0F0F0;
}

.rfv {
    margin-left: 500px;
}

.edc {
    width: 200px;
    padding-right: 5px;
    margin-left: 600px;
    padding-bottom: 5px;
}
.wsx {
    background-color: #FFF;
    // height: calc(100% - 10px);
}

.el-container {
    height: 100%;
}

.el-aside {
    background-color: #324157;
}
</style>